<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>merchantDetail</title>
<style>
.info_status_li{
		list-style: none;
		margin-top:25px;
		margin-bottom:25px;
	}
	.info_status_a{
		color: #fff;
	}
	
    .info_right_css { background-color: #fff; }
    .info_header_css {
    	margin-top:-20px;
    	width: 100%;
        height: 100px;
    	background-color: rgb(26,188,156);
    	color: #fff;
    	text-align: center;
        vertical-align: middle;
        cursor: pointer;
        font-size: 36px;
        line-height: 36px;
        font-weight: 20px;
        border: 0;
        outline: 0;
   	}
   	.info-div{
   		margin-left:0px;
   	}
   	.info-table{
   	margin-top:20px;
   	margin-left:200px;
   	border-collapse:collapse;  
    border-spacing:0;  
    text-align: center;
    vertical-align: middle;
    position: absolute
   	}
   	.menu-ul{
   	list-style:none;
   	padding-left:50px;
   	width:100%;
   	height:50px;
   	background-color:#0AE;
   	margin-top:0px;
   	}
   	.menu-ul li{
   	padding-top:-20px;
   	float:left;
   	magrin-left:100px;
   	padding-top:0px;
   	}
   	.menu-ul>li>a{
   	float:left;
   	padding-left:100px;
   	text-decoration:none;
   	}
   	.header-text{
   		padding-top:40px;
   	}
   	.info_home_css {
   		float: right;
   	}
   
   	.btn{
   		text-align: center;
           vertical-align: middle;
            cursor: pointer;
            width: 60px;
            height: 30px;
            font-size: 16px;
            line-height: 36px;
            border-radius: 4px;
             color: #fff;
            font-weight: 0;
            border: 0;
            outline: 0;
   	}
   	.red{
        background: rgb(199,29,36);
   	}
   		.blue{
            background: #0AE;
                text-decoration: none;
    padding: 5px 12px;
   	}
   	.black{
   	 background: #000;
   	}
   	.green{
   	 background: rgb(31,166,122);
   	}
   	td{
   	text-align: center;
    vertical-align: middle;
    width:200px;
   	}
</style>

	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>

</head>
<body>
	<div class="info_header_css">
		<center><div class="header-text">O2O Admin</div></center>
	</div>
	<div class="info_left">
		<div class="info_left_css">
			<ul class="menu-ul">
				<li class="info_status_li">	<a href="/admins/merchant/audit/wait" class="info_status_a">Home</a> </li>
				<li class="info_status_li">	<a class="info_status_a" style="margin-left:700px">welcome：${sessionScope.name}</a> </li>
			</ul>
		</div>
	</div>
	<div class="info-div">
	<table border="1" class="info-table">
		<tr>
			<th style="width:200px">name</th>
			<th style="width:200px">id_card</th>
			<th style="width:200px">avatar</th>
			<th style="width:200px">address</th>
			<th style="width:200px">status</th>
			<th style="width:200px">audit</th>
		</tr>
		<tr>
			<td>${merchant.name }</td>
			<td><img src="${pageContext.request.contextPath}/merchant/info/idcard?name=${merchant.name }" alt="idCard" width="100" height="150"></td>
			<td><img src="${imagepath}${merchant.avatar }" alt="avatar" width="100" height="150"></td>
			<td>${merchant.address }</td>
			<td>${merchant.status }</td>
			<td>
				<div>
					<input type="hidden" name="name" value="${merchant.name }"/>
					<textArea name="rejectReason" type="text" placeholder="reject reason" rows="5"></textArea>
					<input type="hidden" name="operation" value="reject"></button>
					<button class="btn red" value="reject" onclick="rejectF(this)">reject</button>
					<button class="btn blue" onclick="passF(this)">pass</button>
				</div>
				<input hidden value="<fmt:formatDate value="${merchant.updateTime}" pattern="yyyy-MM-dd HH:mm:ss.SSS"/>">
			</td>
		</tr>
	</table>
	</div>
		<script src="/admins/dist/sweetalert.min.js"></script>
<link rel="stylesheet" type="text/css" href="/admins/dist/sweetalert.css">

	
	  <script type="text/javascript">
       
             $(document).ready(function(){
                function getAuditDetail(){
                    $.ajax({
                        type:"GET",
                        //url:"/merchant/api/audit/all",
                        dataType: "json",
                        success: function(msg){
                             $("#auditDetail tr").not(":first-child").remove(); 
                             $.each(msg.data, function(index, content){
                                var tr = $("<tr></tr>").attr("id","text");
                                tr.append($("<td></td>").attr("style","width:200px").text(content.name));
                                tr.append($("<td></td>").attr("style","width:200px").text(content.idCard));
                                tr.append($("<td></td>").attr("style","width:200px").text(content.avatar));
                                tr.append($("<td></td>").attr("style","width:200px").text(content.address));
                                tr.append($("<td></td>").attr("style","width:200px").text(content.status));
                                tr.append()
                                var actionform = $("<form/>").attr("action","/merchant/status/update");
                                var rejectReason = $("<textArea></textArea>").attr("name","rejectReason").attr("type","text").attr("placeholder","reject reason").attr("rows",5);
                                var rejectBtn = $("<input/>").attr("class","btn red").attr("value","reject").attr("id",content.name).click(function(){
                                     rejectF($(this));
                                });
                                var passBtn = $("<input/>").attr("class","btn blue").attr("value","white_list").click(function(){
                                     passF($(this));
                                });
//                                var passLink = $("<a href=/merchant/status/update?name="+content.name+"&operation=white_list>PASS</a>").attr("class","btn blue");
                                 var hiddenInput = $("<input/>").attr("type","hidden").attr("value",content.name);
                                actionform.append(hiddenInput);   
                                actionform.append(rejectReason);
                                actionform.append(rejectBtn);
                                actionform.append(passBtn);
                                 var actiontd = $("<td></td>").attr("style","width:200px");
                                 tr.append(actiontd);
                                 actiontd.append(actionform);
                                $("#auditDetail").append(tr);
                            });  
                        }
                    })
                     .done(function(msg){ 
                    })
                
                }
                
                
                var t = setInterval(function(){getAuditDetail();},300);
                 setTimeout(function(){
                    clearInterval(t);
                 },300);
                 
                  //reject
                  
                  function auditAlert(user,action){
                	  swal({
                    	  title: "Are you sure?",
                    	  text: "you try to make "+user.name+" "+action,
                    	  type: "warning",
                    	  showCancelButton: true,
                    	  confirmButtonColor: "#DD6B55",
                    	  confirmButtonText: "Yes, "+action+" it!",
                    	  cancelButtonText: "No, cancel plx!",
                    	  closeOnConfirm: false,
                    	  closeOnCancel: false
                    	},
                    	function(isConfirm){
                    	  if (isConfirm) {
                    		 audit(user,action);
                    	  } else {
                    		  swal("Cancelled", "")
                    	  }
                    	});
                  }
                  
                  
                  function audit(user,action){
                	  $.ajax({
                          type:"POST",
                          url:"/admins/merchant/api/audit",
                          data:JSON.stringify(user),
                          contentType:"application/json",
                          dataType: "json",
                          success: function(msg){
                          	console.log(msg);
                               if(msg.code == '-1'){
                              	 swal("Error", msg.message, "error");
                              }else{
                            	  swal("Update!", user.name+" aready "+action, "success");
                            	  setInterval(function(){ window.location.href=document.referrer;},3000);
                            	 
                              }
                          }
                      })
                  }
                 rejectF = function rejectF(buttonf){
                	  var button = $(buttonf);
                     var nameV = button.parent().parent().parent().find("td:eq(0)").text();
                      var idCardV = button.parent().parent().parent().find("td:eq(1)").text();
                      var avatarV = button.parent().parent().parent().find("td:eq(2)").text();
                      var addressV = button.parent().parent().parent().find("td:eq(3)").text();
                      var version = button.parent().parent().find("input:last").val();
                      console.log(button.parent().parent().find("input:last").val());
                      var auditV = "reject";
                      var rejectResonV = button.siblings('textArea').val();
                      if(rejectResonV==null||rejectResonV==""){
                    	  swal("Error", "reason can not be null", "error");
                    	  return;
                      }
                    var user = {name:nameV,idCard:idCardV,avatar:avatarV,address:addressV,status:auditV,rejectReason:rejectResonV,updateTime:version};
                    console.log(user);
                    auditAlert(user,"reject");
                 }
                 
                 //pass
                 passF = function(buttonf){
                	  var button = $(buttonf);
                      var nameV = button.parent().parent().parent().find("td:eq(0)").text();
                      var idCardV = button.parent().parent().parent().find("td:eq(1)").text();
                      var avatarV = button.parent().parent().parent().find("td:eq(2)").text();
                      var addressV = button.parent().parent().parent().find("td:eq(3)").text();
                      var version = button.parent().parent().find("input:last").val();
                      var auditV = "white_list";
                      var user = {name:nameV,idCard:idCardV,avatar:avatarV,address:addressV,status:auditV,updateTime:version};
            		 auditAlert(user,"pass");
                 }
            });
          


    </script>
	
	
</body>
</html>